<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>违章查询</title>
    <style>
        #result>table {
            border-collapse: collapse;
        }
        #result th {
            border-bottom: 1px solid black;
        }
        #result td {
            text-align: center;
            height: 30px;
            border-bottom: 1px dashed darkgray;
        }
        #result tr:last-child > td {
            border: none;
        }
    </style>
</head>
<body>
    <div id="result">
        <input type="text" @keydown.enter="search()" v-model.trim="carinfo" size="30" placeholder="请输入车牌号或车主姓名">
        <button @click="search()">查询</button>
        <hr>
        <table v-if="records.length > 0">
            <tr>
                <th width="100">车牌号</th>
                <th width="100">车主姓名</th>
                <th width="150">违章原因</th>
                <th width="180">违章时间</th>
                <th width="180">处罚方式</th>
                <th width="100">是否受理</th>
                <th width="120">操作</th>
            </tr>
            <tr v-for="record in records">
                <td>{{ record.car.carno }}</td>
                <td>{{ record.car.owner }}</td>
                <td>{{ record.reason }}</td>
                <td>{{ record.makedate }}</td>
                <td>{{ record.punish }}</td>
                <td>{{ record.dealt | handledOrNot }}</td>
                <td>
                    <a href="" @click.prevent="handle(record)">受理</a>
                    <a href="" @click.prevent="remove(record)">删除</a>
                </td>
            </tr>
        </table>
        <!--
        <div class="buttons">
            <button data="/search/?page=1&size={{ page_size }}">首页</button>&nbsp;&nbsp;
            <button data="/search/?page={{ prev_page }}&size={{ page_size }}">上一页</button>&nbsp;&nbsp;
            <button disabled>上一页</button>&nbsp;&nbsp;
            第{{ current_page }}页/共{{ total_page }}页&nbsp;&nbsp;
            <button data="/search/?page={{ next_page }}&size={{ page_size }}">下一页</button>&nbsp;&nbsp;
            <button disabled>下一页</button>&nbsp;&nbsp;
            <button data="/search/?page={{ total_page }}&size={{ page_size }}">末页</button>
        </div>
        -->
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>
    <script>
        let app = new Vue({
            el: '#result',
            data: {
                carinfo: '',
                records: []
            },
            created() {
                this.search()
            },
            methods: {
                search() {
                    fetch('/api/records/?carinfo=' + this.carinfo)
                        .then(resp => resp.json())
                        .then(json => {
                            this.records = json.records
                        })
                },
                handle(record) {
                    if (!record.dealt) {
                        fetch('/handle/?rno=' + record.no).then(resp => resp.json()).then(json => {
                            if (json.code === 30000) {
                                record.dealt = true
                            }
                        })
                    }
                },
                remove(record) {
                    if(confirm('确定要删除这条记录吗？')) {
                        if (record.dealt) {
                            fetch('/delete/?rno=' + record.no).then(resp => resp.json()).then(json => {
                                let index = this.records.indexOf(record)
                                this.records.splice(index, 1)
                            })
                        } else {
                            alert('只能删除已受理的违章记录')
                        }
                    }
                }
            },
            filters: {
                handledOrNot(dealt) {
                    return dealt? '已受理' : '未受理'
                }
            }
        })
    </script>
</body>
</html>